<script setup>

</script>
<template>
	<main>
		<div class="lf">
			<div class="logo">
				Xianjc-Admin
			</div>
			<div class="bg">
			</div>
		</div>
		<div class="rg">
			<div class="container">
				<router-view></router-view>
			</div>
		</div>
	</main>
</template>

<style  scoped lang="scss">
	@import "../../style/color.scss";
	main {
		user-select: none;
		min-height: 100vh;
		min-width: 1000px;
		max-width: 100vw;
		display: flex;
		background: linear-gradient( to bottom, $blue 50%, $white 50%);
		.lf {
			min-width: 500px;
			flex: 1;
			background: $blue;
			border-bottom-right-radius: 38%;
			position: relative;
			.logo {
				user-select: none;
				position: absolute;
				display: flex;
				top: 10%;
				left: 24%;
				font-size: 30px;
				color: $white;
				text-indent: 20px;
				img{
					width: 52px;
					height: 40px;
				}
			}
			.bg{
				margin-top:340px;
				margin-left: 200px;
				img{
					width: 400px;
				}
				p{  line-height: 80px;
					color: $white;
					font-size: 30px;
				}
			}
		}
		.rg {
			min-width: 500px;
			border-top-left-radius: 38%;
			background: $white;
			width: 50%;
			position: relative;
			.container {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 500px;
			}
		}
	}
</style>
